<md-dialog class="form-dialog ruleModal" ng-cloak>
  <!-- Add Rule Form -->
  <form name="form" class="form-horizontal" ng-submit="submit()" novalidate>
    <md-toolbar>
      <div class="md-toolbar-tools">
        <h2 ng-if="!isEdit">{{ 'ADMIN_RULE_ADD_TEXT' | translate }}</h2>
        <h2 ng-if="isEdit">{{ 'ADMIN_RULE_EDIT_TEXT' | translate }}</h2>
        <span flex></span>
        <md-button class="md-icon-button" ng-click="cancel()">
          <md-icon class="fa fa-times-circle" aria-label="Close dialog"></md-icon>
        </md-button>
      </div>
    </md-toolbar>
    <!-- Dialog Content -->
    <md-dialog-content>
      <md-content layout-padding>
        <md-input-container class="md-block" flex-gt-sm>
          <label>{{ 'ADMIN_RULE_PATTERN' | translate }}</label>
          <input type="text" name="pattern" ng-model="rule.pattern" required>
          <div ng-messages="form.pattern.$error" ng-if="form.pattern.$dirty">
            <div ng-message="required">{{ 'FIELD_IS_REQUIRED' | translate }}</div>
          </div>
          <div ng-if="rule.pattern&&isGraphiteName(rule.pattern)" ng-style="{'color': 'saddlebrown', 'margin-top': '10px'}">
            {{ 'ADMIN_RULE_PATTERN_WARN_TEXT' | translate }}
            <kbd ng-click="rule.pattern=translateGraphiteName(rule.pattern)" ng-style="{'cursor': 'pointer'}">
              {{ translateGraphiteName(rule.pattern) }}
            </kbd>
          </div>
        </md-input-container>
        <md-input-container class="md-block" flex-gt-sm>
          <label>{{ 'ADMIN_RULE_COMMENT' | translate }}</label>
          <input type="text" name="comment" ng-model="rule.comment">
        </md-input-container>
        <div layout="row" flex="100">
          <md-input-container flex="15" class="md-block">
            <label>{{ 'ADMIN_RULE_PREVIEW' | translate }}</label>
          </md-input-container>
          <md-input-container flex="85" class="md-block">
            <code ng-bind="buildRepr(rule)"></code>
            <md-tooltip md-autohide>{{ translateRuleRepr(rule) }}</md-tooltip>
          </md-input-container>
        </div>
        <div layout="row" flex="100">
          <md-input-container flex="20" class="md-block">
            <label>{{ 'ADMIN_RULE_LEVEL' | translate }}</label>
          </md-input-container>
          <md-input-container flex="80" class="md-block">
            <md-radio-group ng-model="rule.level" layout="row">
              <md-radio-button ng-value="0" ng-if="!isEdit" ng-init="rule.level=0"> {{ 'ADMIN_RULE_LEVEL_LOW' | translate }} </md-radio-button>
              <md-radio-button ng-value="0" ng-if="isEdit"> {{ 'ADMIN_RULE_LEVEL_LOW' | translate }} </md-radio-button>
              <md-radio-button ng-value="1"> {{ 'ADMIN_RULE_LEVEL_MIDDLE' | translate }} </md-radio-button>
              <md-radio-button ng-value="2"> {{ 'ADMIN_RULE_LEVEL_HIGH' | translate }} </md-radio-button>
            </md-radio-group>
          </md-input-container>
        </div>
        <div layout="row" flex="100">
          <md-input-container flex="40" class="md-block">
            <md-checkbox ng-if="!isEdit" ng-init='rule.trendUp=true' ng-model="rule.trendUp">
              {{ 'ADMIN_RULE_ON_TREND_UP' | translate}}
              <span ng-style="{'color': '#777'}"> ({{ 'OPTIONAL' | translate }}) </span>
            </md-checkbox>
            <md-checkbox ng-if="isEdit" ng-model="rule.trendUp">
              {{ 'ADMIN_RULE_ON_TREND_UP' | translate}}
              <span ng-style="{'color': '#777'}"> ({{ 'OPTIONAL' | translate }}) </span>
            </md-checkbox>
          </md-input-container>
          <md-input-container flex="20" class="md-block">
          <label> {{ 'AND' | translate }} </label>
          </md-input-container>
          <md-input-container class="md-block" flex="40">
            <label> {{ 'ADMIN_RULE_VALUE' | translate }} &gt;= {{ 'OPTIONAL' | translate }} </label>
            <input type="number" step="any" name="thresholdMax" ng-model="rule.thresholdMax">
          </md-input-container>
        </div>
        <div layout="row" flex="100">
          <md-input-container flex="40" class="md-block">
          <md-checkbox ng-model="rule.trendDown" ng-if='!isEdit && rule.pattern.indexOf("timer.count_ps")==0' ng-init='rule.trendDown=true'>
              {{ 'ADMIN_RULE_ON_TREND_DOWN' | translate}}
              <span ng-style="{'color': '#777'}"> ({{ 'OPTIONAL' | translate }}) </span>
          </md-checkbox>
          <md-checkbox ng-model="rule.trendDown" ng-if='!isEdit && rule.pattern.indexOf("timer.count_ps")!=0' ng-init='rule.trendDown=false'>
              {{ 'ADMIN_RULE_ON_TREND_DOWN' | translate}}
              <span ng-style="{'color': '#777'}"> ({{ 'OPTIONAL' | translate }}) </span>
          </md-checkbox>
          <md-checkbox ng-model="rule.trendDown" ng-if='isEdit'>
              {{ 'ADMIN_RULE_ON_TREND_DOWN' | translate}}
              <span ng-style="{'color': '#777'}"> ({{ 'OPTIONAL' | translate }}) </span>
          </md-checkbox>
          </md-input-container>
          <md-input-container flex="20" class="md-block">
          <label> {{ 'AND' | translate }} </label>
          </md-input-container>
          <md-input-container class="md-block" flex="40">
            <label> {{ 'ADMIN_RULE_VALUE' | translate }} &lt;= {{ 'OPTIONAL' | translate }} </label>
            <input type="number" step="any" name="thresholdMin" ng-model="rule.thresholdMin">
          </md-input-container>
        </div>
        <md-input-container class="md-block" flex-gt-sm ng-init="showMore=false" ng-hide="showMore">
          <md-button md-no-ink ng-click="showMore=true" class="md-primary">{{ 'ADMIN_RULE_SHOW_MORE_OPTIONS' | translate }}...</md-button>
        </md-input-container>
        <div layout="row" flex="100" ng-hide="!showMore">
          <md-input-container flex="25">
            <md-checkbox ng-if="!isEdit" ng-model="rule.disabled" ng-init='rule.disabled=false' class="md-warn">
            {{ 'ADMIN_RULE_DISABLE' | translate }}
            </md-checkbox>
            <md-checkbox ng-if="isEdit" ng-model="rule.disabled" class="md-warn">
            {{ 'ADMIN_RULE_DISABLE' | translate }}
            </md-checkbox>
          </md-input-container>
          <md-input-container flex="30">
            <label> {{ 'ADMIN_RULE_DISABLED_FOR' | translate }} </label>
            <input type="number" step="any" name="disabledFor"
            ng-change="disabledForChanged()" ng-model="rule.disabledFor">
          </md-input-container>
          <md-input-container flex="45">
            <label ng-if="rule.disabled&&rule.disabledFor<=0">
              {{ 'ADMIN_RULE_DISABLED_NEVER_EXPIRED' | translate }}
              <span ng-if="disabledForUnSaved">({{ 'UNSAVED' |translate }})</span>
            </label>
            <label ng-if="rule.disabled&&rule.disabledFor>0&&disabledExpireMins(rule)<=0">
              {{ 'ADMIN_RULE_DISABLED_EXPIRED' | translate }}
              <span ng-if="disabledForUnSaved">({{ 'UNSAVED' | translate}})</span>
            </label>
            <label ng-if="rule.disabled&&rule.disabledFor>0&&disabledExpireMins(rule)>0">
            {{ 'ADMIN_RULE_DISABLED_TO_EXPIRE_PREFIX' | translate }}
            {{ disabledExpireMins(rule).toFixed(1) }}
            {{ 'ADMIN_RULE_DISABLED_TO_EXPIRE_SUFFIX' | translate }}
            <span ng-if="disabledForUnSaved">({{ 'UNSAVED' |translate}})</span>
            </label>
          </md-input-container>
        </div>
        <span ng-if="rule.disabled" ng-style="{'color': 'saddlebrown'}" flex="100" ng-hide="!showMore">
          {{ 'ADMIN_RULE_DISABLED_WARN' | translate }}
        </span>
        <div layout="row" flex="100" ng-if="showMore">
          <md-input-container flex="50">
            <md-checkbox ng-model="rule.trackIdle">
              {{ 'ADMIN_RULE_TRACK_IDLE' | translate }}
            </md-checkbox>
          </md-input-container>
          <md-input-container flex="50">
            <md-checkbox ng-model="rule.neverFillZero">
              {{ 'ADMIN_RULE_NEVER_FILL_ZERO' | translate }}
            </md-checkbox>
          </md-input-container>
        </div>
      </md-content>
    </md-dialog-content> <!-- Dialog Content -->
    <!-- Dialog Buttons -->
    <md-dialog-actions layout="row">
    <md-button ng-click="cancel()"> {{ 'CANCEL' | translate}} </md-button>
    <md-button md-no-ink class="md-primary" ng-disabled="form.$invalid" type="submit"> {{ 'SUBMIT' | translate }} </md-button>
    </md-dialog-actions> <!-- ./Dialog Buttons-->
  </form> <!-- ./Add Rule Form -->
</md-dialog>
